<template>
  <div class="coupon-add"
    ref="wrap">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>优惠券管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增优惠券模板</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content"
      style="width:800px">
      <p class="title">
        基础信息
      </p>
      <el-form label-width="200px"
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules">
        <el-form-item label="优惠券模版名"
          prop="name">
          <el-input placeholder="请输入优惠券模板名"
            style="width:300px;"
            clearable
            v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="类型"
          required>
          <el-select v-model="ruleForm.type"
            @change="typeChange">
            <el-option label="代金券"
              :value="1"></el-option>
            <el-option label="折扣券"
              :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额规则"
          v-if="ruleForm.type==1"
          required>
          <el-form-item style="display:inline-block"
            prop="faceValue[0].full">
            <span style="margin-right:5px">满</span>
            <el-input-number v-model="ruleForm.faceValue[0].full"
              controls-position="right"
              :min="0"
              :precision="ruleForm.faceValue[0].full!=0? 2:''"></el-input-number>
          </el-form-item>

          <el-form-item style="display:inline-block"
            prop="faceValue[0].minus">
            <span style="margin:0 5px">减</span>
            <el-input-number v-model="ruleForm.faceValue[0].minus"
              controls-position="right"
              :precision="2"
              :min="1"></el-input-number>
          </el-form-item>
        </el-form-item>
        <el-form-item label="金额规则"
          v-if="ruleForm.type==2"
          required>
          <el-form-item style="display:inline-block"
            prop="faceValue[0].full">
            <span style="margin-right:5px">满</span>
            <el-input-number v-model="ruleForm.faceValue[0].full"
              controls-position="right"
              :min="0"
              :precision="ruleForm.faceValue[0].full!=0? 2:''"></el-input-number>
          </el-form-item>

          <el-form-item style="display:inline-block"
            prop="faceValue[0].enjoy">
            <span style="margin:0 5px">享</span>
            <el-input-number v-model="ruleForm.faceValue[0].enjoy"
              controls-position="right"
              :min="1"
              :precision="1"
              :max="10"></el-input-number>
            <span style="margin:0 5px">折</span>
          </el-form-item>
          <el-form-item style="display:inline-block"
            prop="faceValue[0].minus">
            <span style="margin:0 5px 0 15px">最多减</span>
            <el-input-number v-model="ruleForm.faceValue[0].minus"
              controls-position="right"
              :min="1"
              :precision="2"
              :max="99"></el-input-number>
          </el-form-item>
        </el-form-item>
        <el-form-item label="有效期"
          required>
          <el-select v-model="ruleForm.indate">
            <el-option label="自领取日起"
              :value="1"></el-option>
            <el-option label="时间段"
              :value="2"></el-option>
          </el-select>
          <el-form-item v-if="ruleForm.indate==1"
            style="display:inline-block"
            prop="indateDay">
            <el-input-number v-model="ruleForm.indateDay"
              controls-position="right"
              :min="1"></el-input-number>
            <span style="padding-left:15px">天</span>
          </el-form-item>
          <el-form-item v-if="ruleForm.indate==2"
            style="display:inline-block"
            prop="indateStart">
            <el-date-picker v-model="startEndTime"
              @change="startEndTimeChange"
              type="datetimerange"
              size="small"
              :clearable="false"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm"
              format="yyyy-MM-dd HH:mm"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-form-item>
        <el-form-item label="退款退券"
          prop="backout"
          required>
          <el-radio :label="1"
            v-model="ruleForm.backout">退券</el-radio>
          <el-radio :label="2"
            v-model="ruleForm.backout">不退券</el-radio>
        </el-form-item>
        <el-form-item label="转让规则"
          prop="turnAllow"
          required>
          <el-radio :label="1"
            v-model="ruleForm.turnAllow">可转让</el-radio>
          <el-radio :label="2"
            v-model="ruleForm.turnAllow">不可转让</el-radio>
        </el-form-item>
        <p class="title">
          适用规则
        </p>
        <el-form-item label="适用酒店"
          prop="applyHotel">
          <el-select v-model="ruleForm.applyHotel"
            @change="applyHotelChange">
            <el-option :value="1"
              label="全国"></el-option>
            <el-option :value="2"
              label="选择市"></el-option>
            <el-option :value="3"
              label="选择酒店"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="ruleForm.applyHotel==2"
          prop="applys">
          <el-transfer v-model="ruleForm.applys"
            filterable
            :titles="['未选', '已选']"
            :data="cities"></el-transfer>
        </el-form-item>
        <el-form-item v-if="ruleForm.applyHotel==3"
          prop="applys">
          <el-select v-model="ruleForm.applys"
            style="width:500px;"
            size="small"
            multiple
            filterable
            default-first-option
            placeholder="请选择酒店">
            <el-option v-for="item in hotelList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="适用品类"
          prop="scopes">
          <el-checkbox-group v-model="ruleForm.scopes">
            <el-checkbox :label="1">房费</el-checkbox>
            <el-checkbox :label="2">餐饮</el-checkbox>
            <el-checkbox :label="3">地方文旅</el-checkbox>
            <el-checkbox :label="4">mini商城</el-checkbox>
            <el-checkbox :label="5">其他</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="information-btns"
      :style="{width:width}">
      <el-button size="small"
        type="primary"
        @click="sure('ruleForm')">保存</el-button>
      <el-button size="small"
        @click="back">取消</el-button>
    </div>
  </div>
</template>

<script>
const citysData = require("@/data/cities.json");
import { getHotelPull, addCoupon } from "@/public/js/coupon.js";
export default {
  components: {},
  props: {},
  data() {
    return {
      cities: [],
      hotelId: "",
      hotelList: [],
      startEndTime: [],
      width: "",
      ruleForm: {
        id: "",
        name: "",
        type: 1,
        faceValue: [
          {
            full: undefined,
            minus: undefined,
            enjoy: undefined
          }
        ],
        indate: 1,
        indateDay: undefined,
        indateStart: "",
        indateEnd: "",
        backout: 1,
        turnAllow: 1,
        applyHotel: 1,
        scopes: [1, 2, 3, 4, 5],
        applys: []
      },
      rules: {
        name: [
          { required: true, message: "请输入优惠券模版名", trigger: "blur" }
        ],
        "faceValue[0].full": [
          { required: true, message: " ", trigger: "blur" }
        ],
        "faceValue[0].minus": [
          { required: true, message: " ", trigger: "blur" }
        ],
        "faceValue[0].enjoy": [
          { required: true, message: " ", trigger: "blur" }
        ],
        applyHotel: [{ required: true, message: "", trigger: "blur" }],
        indateDay: [{ required: true, message: " ", trigger: "blur" }],
        indateStart: [{ required: true, message: " ", trigger: "change" }],
        applys: [
          {
            type: "array",
            required: true,
            message: " ",
            trigger: "change"
          }
        ],
        scopes: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个适用品类",
            trigger: "change"
          }
        ]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    applyHotelChange() {
      this.ruleForm.applys = [];
    },
    //获取酒店列表
    _getHotelPull() {
      getHotelPull().then(res => {
        this.hotelList = res.data.pulls;
      });
    },
    typeChange(value) {
      this.ruleForm.faceValue[0] = {
        full: undefined,
        minus: undefined,
        enjoy: undefined
      };
    },
    getAllCities() {
      citysData.provincesEntities.forEach(item => {
        if (item.cityid) {
          if (item.citiess) {
            item.citiess.forEach(i => {
              this.cities.push({
                key: i.cityid,
                label: i.city
              });
            });
          } else {
            this.cities.push({
              key: item.cityid,
              label: item.city
            });
          }
        }
      });
    },
    startEndTimeChange(startEndTime) {
      this.ruleForm.indateStart = startEndTime[0];
      this.ruleForm.indateEnd = startEndTime[1];
    },
    back() {
      this.$router.go(-1);
    },
    //保存
    sure(formName) {
      console.log(this.ruleForm);
      this.$refs[formName].validate(valid => {
        if (valid) {
          addCoupon(this.ruleForm).then(res => {
            if (!res.data.errCode) {
              this.$message.success("新增成功");
              this.back();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  created() {
    this._getHotelPull();
    this.getAllCities();
    this.id = this.$route.query.id;
    if (this.id) {
    } else {
      this.ruleForm = {
        id: "",
        name: "",
        type: 1,
        faceValue: [
          {
            full: undefined,
            minus: undefined,
            enjoy: undefined
          }
        ],
        indate: 1,
        indateDay: undefined,
        indateStart: "",
        indateEnd: "",
        backout: 1,
        turnAllow: 1,
        applyHotel: 1,
        scopes: [1, 2, 3, 4, 5],
        applys: []
      };
    }
  },
  mounted() {
    this.width = this.$refs.wrap.offsetWidth + "px";
  }
};
</script>
<style lang="scss" scoped>
.coupon-add {
  .title {
    font-size: 14px;
    font-weight: bold;
    color: #6d2377;
  }
  .information-btns {
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #fff;
    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1);
    z-index: 1111;
  }
  .el-tag {
    margin-right: 10px;
  }
  .el-input-number {
    width: 100px;
  }
}
</style>